<template>
    <div class="common-layout">
        <el-container>
            <el-header class="main-header">
                <div class="header-title">WMS仓库系统-5组</div>
                <div class="header-user">
                    欢迎<el-icon>
                        <UserFilled />
                    </el-icon>{{ store.UserName }}登录【{{ store.RoleName }}】
                    <el-button type="danger" @click="LoginOut"><el-icon>
                            <SwitchButton />
                        </el-icon>退出</el-button>
                </div>
            </el-header>

            <el-container>
                <el-aside width="200px">
                    <el-menu active-text-color="#ffd04b" background-color="#409eff" class="el-menu-vertical-demo"
                        default-active="route.name" text-color="#fff" router>
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon><el-icon>
                                        <ShoppingCart />
                                    </el-icon></el-icon>
                                <span>货品管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/GoodsTypes">货品类型 4号</el-menu-item>
                                <el-menu-item index="1-2">货品信息 4号</el-menu-item>
                                <el-menu-item index="1-2">仓库管理 1号</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon><el-icon>
                                        <ElementPlus />
                                    </el-icon></el-icon>
                                <span>出入库管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/StockManagement">入库管理3号</el-menu-item>
                                <el-menu-item index="/WareHouseCheck">库存盘点2号</el-menu-item>
                                <el-menu-item index="1-2">库存调拨4号</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon><el-icon>
                                        <Histogram />
                                    </el-icon></el-icon>
                                <span>订单管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">销售退货 3号</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <el-sub-menu index="4">
                            <template #title>
                                <el-icon><el-icon>
                                        <HelpFilled />
                                    </el-icon></el-icon>
                                <span>统计台账</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">统计报表 3号</el-menu-item>
                                <el-menu-item index="1-1">台账 2号</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <el-sub-menu index="5">
                            <template #title>
                                <el-icon><el-icon>
                                        <Iphone />
                                    </el-icon></el-icon>
                                <span>其他</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/Dify">智能客服 4号</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>

                <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

import { useRoute, RouterView, useRouter } from 'vue-router'
import { useCounterStore } from '@/stores/counter';


onMounted(()=>{
    alert(store.RoleName);
    alert(store.UserName)
})

const store = useCounterStore();
const route = useRoute();
const router = useRouter();

//退出登录
const LoginOut = () => {
    store.RoleName = "";
    store.UserName = "";

    router.push("/")
}
</script>

<style scoped>
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #409eff;
    color: #fff;
    font-size: 22px;
    height: 60px;
    padding: 0 32px;
}

.header-title {
    flex: 1;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
}

.header-user {
    font-size: 16px;
}
</style>